<template>
   <!--左侧开始-->
    <section class="mysection">
        <article>
            <!--导航-->
            <div class="mbnav">
                <i class="el el-home"></i>
                <a href="/" title="">首页</a>
                &gt;
                <a href="">{{blog.categoryTitle}}</a>&gt;正文
            </div>
            <!--标题-->
            <h3 class="act-title" >{{blog.title}}</h3>
            <!--副标题信息-->
            <div class="post-line bg-color">
                <ul>
                    <li><a :title="'卑微小袁表于'+blog.createTime">
                        <i class="el-time"></i>
                        <time>{{blog.createTime}}</time>
                    </a></li>
                    <li>
                        <router-link :to="{name:'About'}" title="本文作者：卑微小袁">
                            <i class="el-user"></i>卑微小袁
                        </router-link>                                                    
                    </li>
                    <li>
                        <a href="#Comment" title="转到评论"><i class="el-comment"></i>
                        <span href="#SOHUCS" id="changyan_count_unit"></span></a>
                    </li>
                    <li>
                        <a :title="'已有'+blog.click+'次浏览'">
                            <i class="el-eye-open"></i>
                            <span>({{blog.click}})</span></a>
                    </li>
                </ul>
            </div>
            <div align="center">
                <img style="border: 0;display: block;width: 60%;height: auto;" :src="blog.headerImg">
            </div>
            <div class=" article-content bg-color">
                <div class="article-content bg-color" :id="isSupport(blog.support)">
                    <!--文章正文-->
                    <div class="article-body" v-html="blog.content">
                        
                    </div>
                    <!--END 文章正文-->
                    <!--分享-->
                    <div class="article-fx">
                        <span class="img-circle" href="javascript:void(0)" onClick="dashangToggle()">打赏</span>&nbsp;&nbsp;&nbsp;
                        <a class="fx-btn img-circle img-circle" href="javascript:;">分享</a>
                        <div class="bd-fx arc-bdfx">
                            <i class="el-remove fx-close"></i>
                            <ul class="bdsharebuttonbox">
                                <li><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></li>
                                <li><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a></li>
                                <li><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a></li>
                                <li><a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a></li>
                                <!-- <script th:inline="javascript"> window._bd_share_config = {
                                    "common": {
                                        "bdSnsKey": {},
                                        "bdText": "",
                                        "bdMini": "2",
                                        "bdMiniList": false,
                                        "bdPic": "",
                                        "bdStyle": "1",
                                        "bdSize": "32"
                                    }, "share": {}
                                };
                                (document.getElementsByTagName('head')[0] || document.body).appendChild(document.createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5);
                                </script> -->
                            </ul>
                        </div>
                    </div>
                    <!--END 分享-->
                    <hr>
                    <!--标签-->
                    <div class="article_tag">
                        <ul>
                            <li><a href=""
                                   :title="'归类：'+blog.categoryTitle">{{blog.categoryTitle}}</a>
                            </li>
                            <li v-for="(tag,index) in blog.tags" :key="index" >
                                <a class="b-tag-name" :title="'标签：'+tag">
                                    {{tag}}
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </article>

        <!--上一篇，下一篇-->
        <div class="shangyip bg-color">
            <span>
                <i class="el-arrow-up"></i>上一篇：
                  <a class='blue-text' v-if="previousBlog!=null"
                     href=""
                     :title='previousBlog.title'>{{previousBlog.title}}</a>
                <a v-if="previousBlog==null" class='blue-text' href="#">没有了</a>
            </span>
            <span>
                <i class="el-arrow-down"></i>下一篇：
                <a class='blue-text' v-if="nextBlog!=null" href=""
                   :title='nextBlog.title'>{{nextBlog.title}}</a>
                 <a v-if="nextBlog==null" class='blue-text' href="#">没有了</a>
            </span>
        </div>
        <!--随机推荐-->
        <div class="maybe-love">
            <h4 class="index-title"><i class="el-heart"></i>您还可能喜欢</h4>
            <ul>
                <li v-for="(ranBlog,index) in ranBlogList" :key="index">
                    <a th:href="">
                        <img
                                :src="ranBlog.headerImg" :alt="ranBlog.title"
                                :title="ranBlog.title"/>
                        <span>{{ranBlog.title}}</span>
                    </a>
                </li>
            </ul>
        </div> 
            
    </section>
</template>

<script>
//代码高亮的插件，暂时不研究(可能为了显示博客里的代码)
//import init from '../../static/front-vue/js/highlight.pack.js';
import {titleInit,removeMouseMethod} from '../../../static/front-vue/js/showtip'; //title样式初始化

export default {
    name: 'article',
    data () {
        return {           
            blog:{},    //当前文章
            previousBlog:{},    //上一篇文章
            nextBlog:{},     //下一篇文章
            ranBlogList:{},  //推荐的随机博客
            thisBlogId:this.$route.query.blogId   //当前博客id
            
        }
    },
    watch: {               
        //监听路由
        '$route'(to,from) {
            //只监听到此分类页面的路由请求
            if(to.path == '/article') {
                this.getBlogById();
            }
        }
    },
    created:function() {        
        //生命周期：在html渲染后执行,初次的路由此vue监听不到，采用钩子函数获取数据
        this.getBlogById();   
    },
    //激活时触发
    activated:function() {
            
    },
    updated:function() {
        //渲染完数据进行title样式的自定义
        removeMouseMethod();
        titleInit();
    },
    methods: {
        //按照传过来的id获取某篇文章详细信息
        getBlogById() {
            var _this = this;             
            _this.blogId = _this.$route.query.blogId;  //获取到路由传过来的blogId

            this.$axios.get('/mainPage/body/blog?blogId=' + _this.blogId).then(resp => {
                if (resp && resp.status === 200) {                    
                    _this.blog = resp.data.thisBlog; //接收后台的blog信息                  
                    _this.previousBlog = resp.data.previousBlog; //上一篇                  
                    _this.nextBlog = resp.data.nextBlog; //下一篇  
                    _this.ranBlogList = resp.data.ranBlogList; //随机博客  
                   
                }	
            });
        },
        //判断是否为推荐的博文
        isSupport (support) {
            if(support == 1)
                return 'tuijian';
            else
                return '';
        }
    }
  
}
</script>

<style scoped>
    @import '../../../static/front-vue/css/xcode.css';
     #Catalog_box {
            width: 100%;
        }

        #Catalog_box dl {
            margin: 0;
        }

        #Catalog_box dl dd {
            margin: 0;
            height: 27px;
            overflow: hidden;
            width: 300px;
            line-height: 27px;
            padding-left: 15px;
            border-left: 1px solid #999;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -o-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
        }

        #Catalog_box dl dd.cate-item2 {
            padding-left: 30px;
        }

        #Catalog_box dl dd span {
            margin-right: 10px;
            color: #666;
            font-size: 14px;
            font-family: Arial;
        }

        #Catalog_box .cate-item1 span {
            color: #999;
            font-weight: bold;
            font-family: Arial;
            font-size: 14px;
            padding-right: 5px;
        }

        #Catalog_box .cate-item2 span {
            font-weight: 500;
        }

        #Catalog_box a {
            text-decoration: none;
            color: #666;
            font-family: "Microsoft YaHei";
            font-size: 14px;
        }

        #Catalog_box dl dd a:hover {
            color: #ff6600;
        }

        #Catalog_box .cate-item2 {
            padding-left: 20px;
        }

        #Catalog_box dd.active, #Catalog_box dd.active a, #Catalog_box dd.active span {
            color: #ff6600 !important;
        }

        #Catalog_box dd.active {
            border-left: 1px solid #ff6600;
            background: #E8E8E8;
        }

        .sticky {
            margin-top: 70px;
        }
</style>